<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
</head>
<body>
   <button id="throttleBtn">点击我（节流）</button>
<p>点击次数: <span id="count">0</span></p>
    <script>
    function throttle(func, delay) {
  let lastCallTime = 0;
  

//   剩余参数(...args)语法  优先于（使用方面）  argument对象
  return function(...args) {
    const now = Date.now();
    if (now - lastCallTime < delay) {
      alert('点击太快了，请稍后再试');
      return;
    }
    
    lastCallTime = now;
    return func.apply(this, args);
  };
}
// 使用封装的节流函数
const button = document.getElementById('throttleBtn');
const countDisplay = document.getElementById('count');
let count = 0;
// count的增加逻辑
button.addEventListener('click', throttle(() => {
  count++;
  countDisplay.textContent = count;
 console.log(`执行第 ${count} 次点击`);
}, 1000)); 
</script>
</body>
</html>